<template>
	<view class="Options" :style="Bot" v-if="intents.length">
		<scroll-view scroll-x="true" class="scrollView nowrap">
			<view
				class="list"
				@click="enterInto(item)"
				v-for="(item, index) in intents"
				:key="index">
				<image
					:src="imgUrls(item.icon)"
					class="Icon"
					mode="aspectFill"
					v-if="item.icon"></image>
				<text class="name">{{ item.title }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import Http from '@/utils/request.js';
	import { imgUrls, Toast, toLogin, toUrl } from '@/utils/utils.js';
	import { ref, computed, watch, onMounted } from 'vue';
	import { useMainStore } from '@/stores/index';

	const props = defineProps(['chatBoxHeight', 'intents']);
	const mainStore = useMainStore();
	const Options = ref([]);

	onMounted(() => {
		// getOptions();
	});

	const getOptions = () => {
		Http.get({
			url: '/api/getOptions',
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data || [];
			Options.value = result;
		});
	};

	const enterInto = (item) => {
		if (!mainStore.token) return toLogin();
		if (item.url) toUrl(item.url);
	};

	const Bot = computed(() => {
		return ['bottom:' + `${props.chatBoxHeight}px`].join(';');
	});
</script>

<style lang="scss" scoped>
	.Options {
		width: 100%;
		position: fixed;

		left: 0;
		z-index: 100;
		padding: 0 20rpx;
		.scrollView {
			width: 100%;
			.list {
				border: 1rpx solid #bbbbbb;
				padding: 8rpx 20rpx;
				border-radius: 10rpx;
				display: inline-block;
				margin-right: 24rpx;
				background-color: #fff;
				.Icon {
					width: 30rpx;
					height: 30rpx;
				}
				.name {
					color: #222;
					font-size: 24rpx;
				}
			}
			.list:last-child {
				margin-right: 0;
			}
		}
	}
</style>
